<template>
  <div class="box6">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图标容器 -->
    <div class="charts" ref="chartsRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const chartsRef = ref();

onMounted(() => {
  const myCharts = echarts.init(chartsRef.value);
  // 一个容器可以展示多种类型的图形图表
  myCharts.setOption({
    title: {
      // 主标题
      text: "景区排行",
      // 标题的位置
      left: "center",
      // 文字颜色
      textStyle: {
        color: "yellowgreen",
        fontSize: 20,
      },
      // 子标题
      subtext: "各大景区",
      // 子标题样式
      subtextStyle: {
        color: "yellowgreen",
        fontSize: 16,
      },
    },
    // x轴
    xAxis: {
      type: "category", // 均分
    },
    // y轴
    yAxis: {},
    // 布局组件
    grid: {
      left: 30,
      right: 20,
      bottom: 20,
    },
    // 系列
    series: [
      {
        type: "bar",
        data: [10, 20, 30, 40, 60, 90],
        // 图形上的文本标签
        label: {
          show: true,
          // 文字的位置
          position: "top",
          // 文字的颜色
          color: "yellowgreen",
        },
        // 是否显示背景颜色
        showBackground: true,
        backgroundStyle: {
          // 背景颜色
          color: "rgba(0, 0, 0, 0.2)",
        },
        // 柱条的样式
        itemStyle: {
          // 圆角
          borderRadius: [5, 5, 0, 0],
          // 颜色
          color: function (data: any) {
            // 给每一个柱条设置背景颜色
            const arr = [
              "#5B8FF9",
              "#5AD8A6",
              "#5D7092",
              "#F6BD16",
              "#E8684A",
              "#6DC8EC",
            ];
            return arr[data.dataIndex];
          },
        },
      },
      {
        type: "line",
        data: [10, 20, 30, 40, 60, 90],
        // 平滑曲线
        smooth: true,
      },
    ],
    // 悬停显示文本
    tooltip: {
      // 背景颜色
      backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
  });
});
</script>

<style scoped lang="scss">
.box6 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;

  .title {
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-left: 5px;

    p {
      font-size: 18px;
      color: #ffffff;
    }

    img {
      width: 80px;
      height: auto;
    }
  }

  .charts {
    height: calc(100% - 40px);
  }
}
</style>
